<template>
<div class="setting-main">
	<div class="label">选择你那辣鸡电脑的LOL目录</div>
	<div class="input-wrap">
		<div class="select-btn" @click="selectPath">选择</div>
		<input class="path-input" v-model="path" spellcheck="false">
	</div>
	<div :class="['confirm-btn']" @click="confirmPath">确定</div>
</div>
</template>

<script>
import { ipcRenderer } from 'electron'
let fs = window.require('fs')
	
export default {
	data () {
		return {
			path: '',
		}
	},
	methods: {
		// 选择路径
		selectPath (e) {
			ipcRenderer.send('choose-path', 'openDirectory')
			ipcRenderer.once('choose-path-return', (e, p) => {
				if (p) {
					this.path = p
				}
			})
		},
		// 确认路径
		confirmPath () {
			if (!this.path.trim()) {
				return this.$main.showMsg('你目录还没选')
			}
			let path  = this.path + "\\Game"
			this.readDir(path)
			.then(res => {
				if (!res.includes("League of Legends.exe")) {
					return wrongDir()
				} else {
					this.$main.path = this.path
					this.$main.pathExist = true
					this.$main.writeConfig()
				}
			})
			.catch(() => {
				wrongDir()
			})
			
			let that = this
			
			function wrongDir () {
				that.$main.showMsg('你这目录不对吧?')
			}
		},
		// 读文件夹
		readDir (path) {
			return new Promise((res, rej) => {
				fs.readdir(path, (err, files) => {
					if (err || !files) {
						rej()
					}
					res(files)
				})
			})
		}
	}
}
</script>

<style lang="less">
.setting-main{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	width: 100%;
	height: 100%;
	
	.label{
		margin-bottom: 30px;
		font-size: 20px;
		font-weight: bold;
	}
	
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		transition: all .2s;
		
		&:hover{
			cursor: pointer;
		}
		
		&:active{
			opacity: 0.6;
		}
	}
	
	.input-wrap{
		display: flex;
		align-items: center;
		margin-bottom: 40px;
		
		.select-btn{
			.btn();
			position: relative;
			width: 70px;
			height: 30px;
			background: black;
			color: white;
			margin-right: 20px;
			
			.file{
				position: absolute;
				opacity: 0;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%
			}
			
		}
		
		.path-input{
			padding: 0 8px;
			outline: none;
			width: 450px;
			border-radius: 4px;
			height: 30px;
		}
	}
	
	.confirm-btn{
		.btn();
		width: 70px;
		height: 30px;
		background: black;
		color: white;
		border-radius: 4px;
		margin-right: 20px;
	}
	
	.disable{
		background: #999999;
	}
}
</style>
